<script setup lang="ts">
// @ts-nocheck
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import MainPage from './components/MainPage.vue';
import ConsoleShow from './components/ConsoleShow.vue';
import jquery  from 'jquery'

import  {ref,nextTick,onMounted,onUpdated } from 'vue'
import {getOneByClassLike, getOneById, getOneBySelect} from "./utils/jqUtil";
import {sleep} from "./utils/common"
import {okMsg} from "./utils/noticeUtil"

const mainPageShow = ref(false)

const clearLogHandle = () =>{
    okMsg('日志已清空')
    window.logListSize = 0
    window.logList = []
    jquery('#el-log-main').empty()
}

const sleepLock = async () => {
    await sleep(500)
    console.log('清除')
    window.lockInitSkip = false
}
const  init = async () => {
    window.lockInit = true
    await sleep(600)
    const consoleBtn = getOneById('consoleBtn','控制台按钮',false)
    if (consoleBtn){
        window.lockInitSkip = true
        window.lockInit = false
        sleepLock()
        console.log('已初始化')
        return
    }
    let main: any = null
    console.log('重新已初始化')
    console.log(window.location.href)
    if (window.location.href.startsWith('https://academy.laiye.com/certificate/mine')){
        console.log('主界面')
        main = getOneBySelect('.login-entry-component a:nth-child(2)')
        // return
        // 考试界面
    }else {
        // 普通界面
        // main  = getOneByClassLike('login_right___','主', false)
        // if (!main){
        //     main = getOneById('course_detail_header','课程表格',false)
        //     if (main){
        //         main = main.children[1]
        //     }
        //     // main = main.children
        // }
    }
    window.logList = []

    let div = document.createElement("div");
    div.setAttribute('float','right')

    // let consoleBtnHtml = '<button id="consoleBtn" >开始😀</button>'
    let consoleBtnHtml = '<button id="consoleBtn" class="" style="line-height:30px;font-weight: 600;padding-right: 10px;padding-top: 2px;padding-bottom: 2px;border-radius: 30px; background-color:#bfb2ff; color:purple">开始😀</button>'
    div.innerHTML = consoleBtnHtml
    console.log(main)
    if (main){
        // console.log(main)
        main.after(div)

    }
    // 为按钮添加点击事件监听
    jquery('#consoleBtn').on('click', function() {
        // 在这里添加点击事件的处理逻辑
        changeMainPage()
    });

    // window.changeMainPage = changeMainPage
    window.lockInit = false
}
const changeMainPage = ()=>{
    // console.log('改变')
    mainPageShow.value = !mainPageShow.value
}

var _wr = function(type) {
    var orig = history[type];
    return function() {
        // window.lockInit = true
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');
onMounted(()=>{
    init()
    window.addEventListener('replaceState', function(e) {
        if (window.lockInit || window.lockInitSkip){
            return
        }
        console.log('THEY DID IT AGAIN! replaceState 111111');
        init()
    });
    window.addEventListener('popstate', function(event) {
        if (window.lockInit || window.lockInitSkip){
            return
        }
        init()
    })
    window.addEventListener('pushState', function(e) {
        if (window.lockInit || window.lockInitSkip){
            return
        }
        console.log('THEY DID IT AGAIN! pushState 2222222');
        init()
    });
})



</script>

<template>
    <el-dialog
            v-model="mainPageShow"
            title="控制台(vip)_0.0.2"
            width="1000"
            draggable
    >

        <div v-show="mainPageShow" class="w-100%">
            <el-row>
                <el-col :span="11"> <MainPage   msg=" " /></el-col>
                <el-col  :span="1">
                    <el-divider style="height: 100%;" direction="vertical" />
                </el-col>
               <el-col  :span="11">
                <ConsoleShow></ConsoleShow>
  </el-col>
            </el-row>


        </div>


    </el-dialog>
</template>



<style scoped>



</style>
